<template> 
	<div class="header">
		<span class="iconfont">&#xe616;</span>
    <input type="text" class='keyword' name="keyword" placeholder="输入城市/经典/游玩主题">
    <router-link to="/city">
      <span class="city">{{this.doubleCity}}</span>
    </router-link>
    <span class="iconfont">&#xe64a;</span>
	</div>
</template> 

<script> 
import { mapState,mapGetters} from 'vuex'
export default { 
  name:"HomeSwiper",
  data () { 
    return { 

    }; 
  }, 
  computed:{
    ...mapState(['city']),
    ...mapGetters(['doubleCity'])
  },
  methods: { 

  },
  mounted(){
  
  }


}; 
</script> 

<style scoped> 
  .header{
    font-size: 20px;
    background: #02b4d0;
    color: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 5px 0 5px;

  }
  .keyword{
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
  }
  .city{
    color: white;
  }
</style> 